<template>
  <div class="list-content">
    <el-table
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="name" label="品牌" width="180"> </el-table-column>
      <el-table-column prop="count" label="相关" width="180"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="brand-edit"
            @click="editBrand(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            class="brand-del"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="brand-footer">
      <div class="pag">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="currentCount"
          @current-change="toPage"
          :page-size="size"
          :current-page="current"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  branchApi,
  delBranch,
  pageApi,
  sortApi,
} from "@/http/commodity-management/branchApi";
export default {
  name: "BrandList",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      current: 1,
      currentCount: 1,
      size: 10,
    };
  },
  mounted() {
    // console.log(111);
    this.renderPag(this.current, this.size);
    this.$bus.$on("table", (table) => {
      this.tableData = [];
      this.tableData = table;
      console.log(this.tableData);
    });
    this.$bus.$on("selectPage", (selectPage) => {
      this.renderPag(this.current, selectPage);
      this.size = selectPage;
    });
    this.$bus.$on("sort", (sort) => {
      this.sortFunction(sort);
    });
  },
  computed: {
    gettable() {
      return this.tableData;
    },
  },
  methods: {
    handleDelete(id) {
      console.log("删除id：", id);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBranch(id);
          this.renderPag(); //渲染页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    renderPag(page, size) {
      // 渲染页面
      branchApi()
        .then((res) => {
          this.currentCount = res.data.number;
        })
        .catch((err) => {
          console.log("页面加载失败", err);
        });
      pageApi(page, size)
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    toPage(curr) {
      this.renderPag(curr, this.size);
      this.current = curr;
    },
    editBrand(row) {
      this.$router.push({ path: "/goods/addBrand", query: { obj: row } });
    },
    sortFunction(sort) {
      console.log("排序", sort);
      sortApi(sort)
        .then((res) => {
          // console.log(res)
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },
  },
};
</script>


<style scoped lang="scss">
@import "@/assets/sass/var.scss";
.brand-footer {
  height: 50px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e4e4e4;

  .pag {
    float: right;
    margin-top: 8px;
  }
}
.brand-footer ::v-deep .active {
  background-color: $panel-color !important;
}
</style>
